<template>
  <div class="home">
    <HelloWorld :msg="msg" :msg1="msg1" @childFn="childFn" @childFn1="childFn1" ref="child">
      <!-- 匿名插槽 -->
      <span>默认插槽</span>
      <!-- 具名插槽 -->
      <template #title>
        <h1>具名插槽</h1>
      </template>
      <!-- 作用域插槽 -->
      <template #footer="{scope}">
        <footer>作用域插槽：{{scope.name}}\{{scope.age}}</footer>
      </template>
    </HelloWorld>
    <button @click="getChildValue">获取子组件暴露出来的值</button>
    <div>
      <h2>{{obj.name}}</h2>
    </div>
    <div>
      <button @click="toButton">跳转button</button>
    </div>
    <hr />
    <h3>自定义组件v-model</h3>
    <CustomInput v-model="text1" msg='啦啦啦'></CustomInput>
    <h3>父组件：{{text1}}</h3>
    <hr />
    <h3>keep alive</h3>
    <ActiveComponent></ActiveComponent>
    <hr />
    <h3>teleport</h3>
    <MyModal></MyModal>
    <hr />
    <h3>store</h3>
    <div>user: {{user}}</div>
    <button @click="changeData">change data</button>
    <hr />
    <h3>vuex辅助函数</h3>
    <div>
      <span>{{age}}</span>
    </div>
    <hr />
    <Router></Router>
  </div>
</template>

<script setup>

import HelloWorld from '@/components/HelloWorld.vue'
import CustomInput from '@/components/CustomInput.vue'
import ActiveComponent  from '@/components/activeComponent.vue'
import MyModal from '@/components/MyModal.vue'
import Router from '@/components/router.vue'
import { onBeforeRouteLeave, onBeforeRouteUpdate } from 'vue-router'

const store = useStore()
const user = computed(() => store.state.account.user)

const msg = ref('父组件')
const msg1 = ref('父组件1')
const child = ref(null)
const obj = ref({
  name: 'zs'
})
const num = reactive({
  val: 1
})
const text1 = ref('父组件的值')

provide('message', {
  msg: 'provide提供的'
})

const childFn = (e) => {
  msg.value = e
}
const childFn1 = (e) => {
  msg1.value = e
}

const getChildValue = () => {
  console.log(child)
  console.log(child.value.a)
  console.log(child.value.b)
  child.value.b = 3
}

const changeData = async () => {
  await store.dispatch('account/login', {
    user: 'zhao',
    pwd: '123456'
  })
  console.log('回调')
}

onBeforeRouteLeave((to, from) => {
  const answer = window.confirm('离开？')
  setTimeout(()=>{
    console.log('异步')
  }, 1000)
  if(!answer) return false
})
onBeforeRouteUpdate((to, from) => {
  console.log(to, 'to')
  console.log(from, 'from')
})

</script>

<script>
import { mapState } from 'vuex'
export default {
  computed: {
    ...mapState('account', ['age'])
  }
}
class Father {
  constructor(name) {
    this.name = name;
  }
  speak() {
    console.log(this.name, 'father');
  }
}
class Person extends Father{
  constructor(name) {
    super(name);
    this.name = name;
  }
  speak() {
    console.log(this.name, 'son');
  }
}
const p = new Person('zs');
p.speak();
</script>

<style scoped>
.home {
  padding-bottom: 100px;
}
</style>
